<template>
  <div style="padding: 24px">
    <div class="tp-content" v-for="(item, index) in recommendList" :key="index">
      <h1>
        <el-icon><Connection /></el-icon
        ><span style="font-size: 20px; margin-left: 5px; color: #555">{{
          item.menuName
        }}</span>
      </h1>
      <div class="card-box">
        <el-card
          v-for="(bitem, bindex) in item.bookmarkList"
          :key="bindex"
          style="
            width: 267px;
            height: 76px;
            margin: 0 10px 10px 0;
            cursor: pointer;
          "
          shadow="hover"
          @click="handleClick(bitem.url)"
        >
          <div class="card-body flex">
            <img
              :src="'https://favicon.cangquyun.com/get.php?url=' + bitem.urls"
              style="width: 40px; height: 40px; margin-right: 10px"
            />
            <div :title="bitem.title">
              <h1>{{ bitem.title }}</h1>
              <p>{{ bitem.description }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { mAxios } from "~/utils/axios/axios.js";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
const route = useRoute();
const menuId = route.query?.menuId;
const recommendList = ref([]);
onMounted(() => {
  mAxios.get("bookmarks/recommend/" + menuId).then((res) => {
    let resp = JSON.parse(res.data.data);
    recommendList.value = resp.data;
  });
});
const handleClick = (url) => {
  window.open(url);
};
</script>

<style lang="scss" scoped>
.tp-content {
  width: 100%;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 24px;

  .card-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
}
.card-body > div {
  h1 {
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  p {
    margin-top: 10px;
    font-size: 14px;
    color: #94a3b8;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
:deep(.el-card__body) {
  padding: 15px;
}
</style>